<template>
  <table class="table_main">
    <tr style="display: flex; width: 100%">
      <td class="table_img"></td>
      <td class="table_item head_font table_name">商品名称</td>
      <td class="table_item head_font">商品价格</td>
      <td class="table_item head_font">商品销量</td>
      <td class="table_item head_font">店铺名称</td>
    </tr>
    <img :src="header_src" class="header_img">
    <div class="table_body">
      <tr class="table_tr" v-for="goods in prop" :key="goods.id" ref="scroll">
        <td class="table_img body_font"><img :src="goods.goods_img" class="goods_img"></td>
        <td class="table_item body_font table_name goods_title">{{goods.title}}</td>
        <td class="table_item body_font">￥{{goods.prince}}元</td>
        <td class="table_item body_font">{{goods.sales}}个</td>
        <td class="table_item body_font">{{goods.shop_name}}</td>
      </tr>
    </div>
  </table>
</template>

<script>
import header from '@/assets/header.png'
export default {
  name: 'index',
  props:['prop'],
  data(){
    return {
      header_src:header,
    }
  },
}
</script>

<style scoped lang="scss">
.table_main{
  box-sizing: border-box;
  width: 100%;
  height: 90%;
  .table_body{
    overflow-y: scroll;
    width: 100%;
    height: 90%;
    &::-webkit-scrollbar{
      display: none;
    }
  }
}
.table_img{
  width: 35px;
  height: 35px;
  margin-right: 20px;
}
.table_item{
  min-width: 100px;
  text-align: center;
}
.head_font{
  font-size: 20px;
  color:#1a95a4;
  font-weight: 900;
}
.table_name{
  width:500px;
  text-align: left;
}
.body_font{
  line-height: 35px;
  color: #1a95a4;
  font-size: 11px;
  height: 40px;
}
.header_img{
  margin-bottom: 5px;
  width: 100%;
  background-size: cover;
}
.table_tr{
  display: flex;
}
.goods_img{
  width: 35px;
  height: 35px;
}
.goods_title{
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
</style>
